<template>
    <div class="member-order-page">
        <XtxTabs v-model="activeName" @click-tab="clickTab">
            <XtxTabsPanel name="all" label="全部订单">全部订单</XtxTabsPanel>
            <XtxTabsPanel name="unpay" label="待付款">待付款</XtxTabsPanel>
            <XtxTabsPanel name="deliver" label="待发货">待发货</XtxTabsPanel>
            <XtxTabsPanel name="receive" label="待收货">待收货</XtxTabsPanel>
            <XtxTabsPanel name="comment" label="待评价">待评价</XtxTabsPanel>
            <XtxTabsPanel name="complete" label="已完成">已完成</XtxTabsPanel>
            <XtxTabsPanel name="cancel" label="已取消">已取消</XtxTabsPanel>
        </XtxTabs>
    </div>
    <div class="order-list">
        <div class="order-item">
            <div class="head">
                <span>下单时间：2018-01-08 15:02:00</span>
                <span>订单编号：62205697599</span>
                <span class="down-time">
                    <i class="iconfont icon-down-time"></i>
                    <b>付款截止：28分20秒</b>
                </span>
            </div>
            <div class="body">
                <div class="column goods">
                    <OrderItem />
                </div>
                <div class="column state">
                    <p>待付款</p>
                </div>
                <div class="column amount">
                    <p class="red">¥19.00</p>
                    <p>（含运费：¥10.00）</p>
                    <p>在线支付</p>
                </div>
                <div class="column action">
                    <XtxButton type="primary" size="small">立即付款</XtxButton>
                    <p><a href="javascript:;">查看详情</a></p>
                    <p><a href="javascript:;">取消订单</a></p>
                </div>
            </div>
        </div>
        
    </div>
    <div class="order-detail-page">
    <!-- 操作栏 -->
    <DetailAction :order="order" />
    <!-- 步骤条 组件xtx-steps.vue-->
    <!-- 物流栏 -->
    <!-- 订单商品信息 -->
  </div>
</template>
  <script setup>
import { ref } from 'vue'
import OrderItem from './components/order-item.vue'
import DetailAction from './components/detail-action.vue'
const activeName = ref('all')
const clickTab = () => {

}

const order = ref({})
</script>
  <style scoped lang="scss">
 .order-list {
  padding: 20px;
  position: relative;
  min-height: 400px;
}
.loading {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(255,255,255,.9) url(../../../assets/images/loading.gif) no-repeat center;
}
.none {
  height: 400px;
  text-align: center;
  line-height: 400px;
  color: #999;
}
  
  .order-item {
      margin-bottom: 20px;
      border: 1px solid #f5f5f5;
  
      .head {
          height: 50px;
          line-height: 50px;
          background: #f5f5f5;
          padding: 0 20px;
          overflow: hidden;
  
          span {
              margin-right: 20px;
  
              &.down-time {
                  margin-right: 0;
                  float: right;
  
                  i {
                      vertical-align: middle;
                      margin-right: 3px;
                  }
  
                  b {
                      vertical-align: middle;
                      font-weight: normal;
                  }
              }
          }
  
          .del {
              margin-right: 0;
              float: right;
              color: #999;
          }
      }
  
      .body {
          display: flex;
          align-items: stretch;
  
          .column {
              border-left: 1px solid #f5f5f5;
              text-align: center;
              padding: 20px;
  
              >p {
                  padding-top: 10px;
              }
  
              &:first-child {
                  border-left: none;
              }
  
              &.goods {
                  flex: 1;
                  padding: 0;
                  align-self: center;
  
                  ul {
                      li {
                          border-bottom: 1px solid #f5f5f5;
                          padding: 10px;
                          display: flex;
  
                          &:last-child {
                              border-bottom: none;
                          }
  
                          .image {
                              width: 70px;
                              height: 70px;
                              border: 1px solid #f5f5f5;
                          }
  
                          .info {
                              width: 220px;
                              text-align: left;
                              padding: 0 10px;
  
                              p {
                                  margin-bottom: 5px;
  
                                  &.name {
                                      height: 38px;
                                  }
  
                                  &.attr {
                                      color: #999;
                                      font-size: 12px;
  
                                      span {
                                          margin-right: 5px;
                                      }
                                  }
                              }
                          }
  
                          .price {
                              width: 100px;
                          }
  
                          .count {
                              width: 80px;
                          }
                      }
                  }
              }
  
              &.state {
                  width: 120px;
  
                  .green {
                      color: $mainColor;
                  }
              }
  
              &.amount {
                  width: 200px;
  
                  .red {
                      color: $priceColor;
                  }
              }
  
              &.action {
                  width: 140px;
  
                  a {
                      display: block;
  
                      &:hover {
                          color: $mainColor;
                      }
                  }
              }
          }
      }
  }
  </style>
  